<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/static/bootstrap/main/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/bootstrap/table/css/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/bootstrap/fileinput/css/fileinput.min.css}" rel="stylesheet"/>
    <link rel="stylesheet"  th:href="@{/static/layui/css/layui.css}"  media="all">
    <style type="text/css">
        .agreeNode{
            position: absolute;
            border: 2px solid #67ff00;
        }
        .rejectNode{
            position: absolute;
            border: 2px solid #ff1300;
        }
        .gateWay{
            transform:rotate(30deg) scale(0.8,0.8);
            -ms-transform:rotate(30deg) scale(0.8,0.8); /* IE 9 */
            -webkit-transform:rotate(45deg) scale(0.8,0.8); /* Safari and Chrome */
        }
        .agreeFlow{
            position: absolute;
            background-color: #67ff00;
            height: 3px;
            width: 20px;
            top: 0px;
            left: 0px;
        }
        .rejectFlow{
            position: absolute;
            background-color: #ff1300;
            height: 3px;
            width: 20px;
            top: 0px;
            left: 0px;
        }
        .popover{
            max-width: none;
        }
        .startOrEnd{
            border-radius: 25px;
        }
        .layui-btn-end {
            background-color: #53c900;
        }
    </style>
</head>
<body>
<div style="height: 150px;"></div>
<div id="toolbar" style="position: absolute">
    <img th:src="@{/work-flow/getProcessInstanceIdIdBpmnImgs/{processInstanceId}(processInstanceId=${processInstanceId})}">
</div>
</body>
<script th:src="@{/static/bootstrap/jquery/jquery-3.3.1.min.js}"></script>
<script th:src="@{/static/bootstrap/main/js/bootstrap.min.js}"></script>
<script th:src="@{/static/bootstrap/table/js/bootstrap-table.min.js}"></script>
<script th:src="@{/static/bootstrap/table/js/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/static/bootstrap/fileinput/js/fileinput.js}"></script>
<script th:src="@{/static/bootstrap/fileinput/locales/zh.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script>
    var layer;
    layui.use('layer', function() { //独立版的layer无需执行这一句
        layer = layui.layer; //独立版的layer无需执行这一句
        $.ajax({
            url:"/work-flow/getNodeInfo",
            type:"GET",
            data: {
                "processInstanceId" : "[[${processInstanceId}]]"
            },
            contentType:"application/json;charset=UTF-8",
            dataType: "json",
            success:function(res){
                if (res.data.status == 2 || res.data.status == 3) {
                    agreeHighLightedNodeInfos(res.data.highLightedNodeInfos);
                    agreeHighLightedFlowInfos(res.data.highLightedFlowInfos);
                }else {
                    rejectHighLightedNodeInfos(res.data.highLightedNodeInfos);
                    rejectHighLightedFlowInfos(res.data.highLightedFlowInfos);
                }
                activiti(res.data.highLightedNodeInfos);
                console.log(res);
            }
        });
        function agreeHighLightedFlowInfos(highLightedFlowInfos) {
                for (let i = 0; i < highLightedFlowInfos.length; i++) {
                    if (highLightedFlowInfos[i].startX == highLightedFlowInfos[i].endX) {
                        var h =highLightedFlowInfos[i].endY - highLightedFlowInfos[i].startY;
                        $("#toolbar").append("<div class='agreeFlow' style=' height: " + h + "px;width: 3px;" +
                            "top: " + highLightedFlowInfos[i].startY + "px;left: " + highLightedFlowInfos[i].startX + "px;'></div>");
                    } else {
                        var w = highLightedFlowInfos[i].endX - highLightedFlowInfos[i].startX;
                        $("#toolbar").append("<div class='agreeFlow' style=' height: 3px;width: " + w + "px;" +
                            "top: " + highLightedFlowInfos[i].startY + "px;left: " + highLightedFlowInfos[i].startX + "px;'></div>");
                    }
                }
        }

        function rejectHighLightedFlowInfos(highLightedFlowInfos) {
            for (let i = 0; i < highLightedFlowInfos.length; i++) {
                if (highLightedFlowInfos[i].startX == highLightedFlowInfos[i].endX) {
                    var h =highLightedFlowInfos[i].endY - highLightedFlowInfos[i].startY;
                    $("#toolbar").append("<div class='rejectFlow' style=' height: " + h + "px;width: 3px;" +
                        "top: " + highLightedFlowInfos[i].startY + "px;left: " + highLightedFlowInfos[i].startX + "px;'></div>");
                } else {
                    var w = highLightedFlowInfos[i].endX - highLightedFlowInfos[i].startX;
                    $("#toolbar").append("<div class='rejectFlow' style=' height: 3px;width: " + w + "px;" +
                        "top: " + highLightedFlowInfos[i].startY + "px;left: " + highLightedFlowInfos[i].startX + "px;'></div>");
                }
            }
        }

        function agreeHighLightedNodeInfos(highLightedNodeInfos) {
            for (let i = 0; i < highLightedNodeInfos.length; i++) {
                if (highLightedNodeInfos[i].nodeType == 5 || highLightedNodeInfos[i].nodeType == 6) {
                    $("#toolbar").append(" <div class='agreeNode gateWay' style='height: " + highLightedNodeInfos[i].height + "px;" +
                        "width: " + highLightedNodeInfos[i].width + "px;top: " + highLightedNodeInfos[i].y + "px;" +
                        "left: " + highLightedNodeInfos[i].x + "px;'></div>");
                } else if (highLightedNodeInfos[i].nodeType == 1 || highLightedNodeInfos[i].nodeType == 7){
                    $("#toolbar").append(" <div id='" + highLightedNodeInfos[i].activitiId + "' class='agreeNode startOrEnd' style='height: " + highLightedNodeInfos[i].height + "px;" +
                        "width: " + highLightedNodeInfos[i].width + "px;top: " + highLightedNodeInfos[i].y + "px;" +
                        "left: " + highLightedNodeInfos[i].x + "px;'></div>");
                } else {
                    $("#toolbar").append(" <div id='" + highLightedNodeInfos[i].activitiId + "' class='agreeNode' style='height: " + highLightedNodeInfos[i].height + "px;" +
                        "width: " + highLightedNodeInfos[i].width + "px;top: " + highLightedNodeInfos[i].y + "px;" +
                        "left: " + highLightedNodeInfos[i].x + "px;'></div>");
                }
            }

        }

        function rejectHighLightedNodeInfos(highLightedNodeInfos) {
            for (let i = 0; i < highLightedNodeInfos.length; i++) {
                if (highLightedNodeInfos[i].nodeType == 5 || highLightedNodeInfos[i].nodeType == 6) {
                    $("#toolbar").append(" <div class='rejectNode gateWay' style='height: " + highLightedNodeInfos[i].height + "px;" +
                        "width: " + highLightedNodeInfos[i].width + "px;top: " + highLightedNodeInfos[i].y + "px;" +
                        "left: " + highLightedNodeInfos[i].x + "px;'></div>");
                } else if (highLightedNodeInfos[i].nodeType == 1 || highLightedNodeInfos[i].nodeType == 7){
                    $("#toolbar").append(" <div id='" + highLightedNodeInfos[i].activitiId + "' class='rejectNode startOrEnd' style='height: " + highLightedNodeInfos[i].height + "px;" +
                        "width: " + highLightedNodeInfos[i].width + "px;top: " + highLightedNodeInfos[i].y + "px;" +
                        "left: " + highLightedNodeInfos[i].x + "px;'></div>");
                } else {
                    $("#toolbar").append(" <div id='" + highLightedNodeInfos[i].activitiId + "' class='rejectNode' style='height: " + highLightedNodeInfos[i].height + "px;" +
                        "width: " + highLightedNodeInfos[i].width + "px;top: " + highLightedNodeInfos[i].y + "px;" +
                        "left: " + highLightedNodeInfos[i].x + "px;'></div>");
                }
            }

        }

        function activiti(highLightedNodeInfos) {
            for (let i = 0; i < highLightedNodeInfos.length; i++) {
                if (highLightedNodeInfos[i].nodeType == 1) {
                    startContent(highLightedNodeInfos[i]);
                }
                if (highLightedNodeInfos[i].nodeType == 2) {
                    taskContent(highLightedNodeInfos[i]);
                }
            }
        }
        
        function startContent(highLightedNodeInfo) {
            let activitiApplyManagerEntity = highLightedNodeInfo.activitiApplyManagerEntity;
            let urgency = "";
            let status = "";
            switch (activitiApplyManagerEntity.urgency) {
                case 0 : {
                    urgency = "<button type='button' class='layui-btn layui-btn-normal layui-btn-sm'>一般</button>";
                }break;
                case 1 : {
                    urgency = "重要";
                }break;
                case 2 : {
                    urgency = "紧急";
                }break;
            }
            switch (activitiApplyManagerEntity.status) {
                case 2 : {
                    status = "<button type='button' class='layui-btn layui-btn-warm layui-btn-sm'>审批中</button>";
                }break;
                case 3 : {
                    status = "<button type='button' class='layui-btn layui-btn-end layui-btn-sm'>审批通过</button>";
                }break;
                case 5 : {
                    status = "<button type='button' class='layui-btn layui-btn-danger layui-btn-sm'>驳回</button>";
                }break;
            }
            let html = "<table class=\"table table-bordered\">" +
                "<tr><td>申请人</td><td>" + activitiApplyManagerEntity.applyUsrName + "</td></tr>" +
                "<tr><td>申请时间</td><td>" + changeDateFormat(activitiApplyManagerEntity.createTime) + "</td></tr>" +
                "<tr><td>流程紧急程度</td><td>" + urgency + "</td></tr>" +
                "<tr><td>流程状态</td><td>" + status + "</td></tr>" +
                "</table>";
            $("#" + highLightedNodeInfo.activitiId + "").popover({
                placement:'top',
                html:true,
                title:"申请人信息",
                content:html,
                trigger:'hover'
            });
            $("#" + highLightedNodeInfo.activitiId + "").popover();
        }

        function taskContent(highLightedNodeInfo) {
            let approvalecordEntity = highLightedNodeInfo.approvalecordEntity;
            let status = "";
            switch (approvalecordEntity.status) {
                case 0 : {
                    status = "<button type='button' class='layui-btn layui-btn-danger layui-btn-sm'>驳回</button>";
                }break;
                case 1 : {
                    status = "<button type='button' class='layui-btn layui-btn-normal layui-btn-sm'>同意</button>";
                }break;
                case 2 : {
                    status = "<button type='button' class='layui-btn layui-btn-warm layui-btn-sm'>待审批</button>";
                }break;
            }
            let html = "<table class=\"table table-bordered\">" +
                "<tr><td>审批人</td><td>" + approvalecordEntity.approvalUserName + "</td></tr>" +
                "<tr><td>审批状态</td><td>" + status + "</td></tr>" +
                "<tr><td>审批开始时间</td><td>" + changeDateFormat(approvalecordEntity.startTime) + "</td></tr>";
            if (approvalecordEntity.endTime != null) {
                html += "<tr><td>审批结束时间</td><td>" + changeDateFormat(approvalecordEntity.endTime) + "</td></tr>";
            }
            if (approvalecordEntity.duration != null) {
                html += "<tr><td>审批时长</td><td>" + MillisecondToDate(approvalecordEntity.duration) + "</td></tr>";
            }
            if (approvalecordEntity.opinion != null) {
                html +=  "<tr><td>审批意见</td><td>" + approvalecordEntity.opinion + "</td></tr>";
            }
            if (approvalecordEntity.imgPath != null) {
                html += "<tr><td>审批签名</td><td>" + approvalecordEntity.imgPath  + "</td></tr>";
            }
            html += "</table>";
            $("#" + highLightedNodeInfo.activitiId + "").popover({
                placement:'top',
                html:true,
                title:"审批意见",
                content:html,
                trigger:'hover'
            });
            $("#" + highLightedNodeInfo.activitiId + "").popover();
        }

        /**
         * 时间格式日期转换
         */
        function changeDateFormat(cellval) {
            if (cellval != null) {
                var date = new Date(cellval);
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
            }
        }

        function MillisecondToDate(msd) {
            var time = parseFloat(msd) /1000;
            if (null!= time &&""!= time) {
                if (time >60&& time <60*60) {
                    time = parseInt(time /60.0) +"分钟"+ parseInt((parseFloat(time /60.0) -
                        parseInt(time /60.0)) *60) +"秒";
                }else if (time >=60*60&& time <60*60*24) {
                    time = parseInt(time /3600.0) +"小时"+ parseInt((parseFloat(time /3600.0) -
                        parseInt(time /3600.0)) *60) +"分钟"+
                        parseInt((parseFloat((parseFloat(time /3600.0) - parseInt(time /3600.0)) *60) -
                            parseInt((parseFloat(time /3600.0) - parseInt(time /3600.0)) *60)) *60) +"秒";
                } else if (time > 60*60*24){
                    time = parseInt(time /86400.0) +"天"+parseInt(time /3600.0) +"小时"+ parseInt((parseFloat(time /3600.0) -
                        parseInt(time /3600.0)) *60) +"分钟"+
                        parseInt((parseFloat((parseFloat(time /3600.0) - parseInt(time /3600.0)) *60) -
                            parseInt((parseFloat(time /3600.0) - parseInt(time /3600.0)) *60)) *60) +"秒";
                }else {
                    time = parseInt(time) +"秒";
                }
            }else{
                time = "0 时 0 分0 秒";
            }
            return time;

        }

    });
</script>

</html>